<template>
  <div class="flex">
    <vue-header title="发现" :visibleBackBtn="false">
      <img src="@img/btn/find_btn_find@2x.png" slot="right" width="20" @click="$toView('index/finds/publish')">
    </vue-header>

    <div class="filters com-onMask" slot="bar">
      <div class="filter-item" :class="{ selected: selected === 'type' }" @click="openSelect('filterType')">
        <span>{{ filterType === '' ? '类型' : ['', '求购', '话题', '二手物品'][filterType] }}</span>
        <x-icon type="ios-arrow-down" size="14" class="arrow"></x-icon>
      </div>

      <div class="options" v-if="visibleOptions && showOptions">
        <div class="option" @click="setFilterItem(selected, '')"
          :class="{ selected: '' === $data[selected] }"
        >不设置</div>
        <div class="option" v-for="(item, index) in showOptions" :key="index"
          :class="{ selected: item.id === $data[selected] }"
          @click="setFilterItem(selected, item.id)"
        >{{ item.name }}</div>
      </div>
    </div>    

    <infinite-container :loadMore="loadData" class="container" v-if="findsData.status !== 5"
      :status="findsData.status" :swipeDownRefreshMethod="() => this.loadData(true)"
      
    >
      <transition-group name="float">
        <find-item v-for="item in findsData.data || []" :key="item.id" :data="item" type="finds"
          @click.native="$toView('info/find', { query: { id: item.id } })"
          @dian_zan="toggle_zan"
        ></find-item>
        <infinite-container-hint key="hint" :status="findsData.status" :method="loadData"></infinite-container-hint>
      </transition-group>
    </infinite-container>      

    <div class="com-notData flex-grow" title="暂无内容" v-else></div>
  </div>
</template>

<script>
import FindItem from '@c/item/FindItem'
import InfiniteContainer from '@c/InfiniteContainer'
import InfiniteContainerHint from '@c/InfiniteContainerHint'
import saveScroll from '@u/mixin/saveScroll.js'

export default {
  components: {
    FindItem,
    InfiniteContainer,
    InfiniteContainerHint,
  },

  mixins: [saveScroll],

  data (){
    return {
      findsData: {
        data: null,
        page: 1,
        pageTotal: 1,
        status: 1,    // 状态，1：初始，2：加载中，3：成功，4：全部加载，5：无数据，0：失败
      },

      filterType: this.$route.query.type || '',  // 筛选项：类型 的值
      selected: '',   // 选中的筛选项
      visibleOptions: false 
    }
  },

  beforeRouteLeave (to, from, next){
    this.$alert.mask.hide()
    next()
  },

  mounted (){
    this.$alert.loading.show()
    _locationReady.then(() =>{
      this.$alert.loading.hide()
      this.loadData()
    })
  },

  activated (){
    if(this.$route.params.reload){
      this.init()
      this.loadData()
    }
  },

  computed: {
    // 应显示的筛选列表
    showOptions (){
      var filterType = [
        { name: '求购', id: 1 },
        { name: '话题', id: 2 },
        { name: '二手物品', id: 3 },
      ]

      return { filterType }[this.selected]
    }
  },

  methods: {
    init (){
      this.findsData = {
        data: null,
        page: 1,
        pageTotal: 1,
        status: 1,
      }
    },

    openSelect (name){
      this.selected = name
      this.visibleOptions = true
      this.$alert.mask.show(() =>{
        this.visibleOptions = false
        this.selected = ''
      })
    },

    // 设置筛选项
    setFilterItem (name, id){
      this.$data[name] = id
      this.visibleOptions = false
      this.$alert.mask.hide()
      this.selected = ''

      this.init()
      this.loadData()
    },
    
    // 读取发现list
    loadData (isSwipeDownRefresh = false){
      return new Promise((resolve, reject) =>{
        if((this.findsData.page <= this.findsData.pageTotal) || isSwipeDownRefresh){
          if(!isSwipeDownRefresh) this.findsData.status = 2
          _api('find/getListByCon', {
            level: '0,2,3,4',
            page: isSwipeDownRefresh ? 1 : this.findsData.page,
            find_type: this.filterType
          }).then(data =>{
            this.findsData.status = 3
            if(!this.findsData.data) this.findsData.data = []
            this.findsData.data = (isSwipeDownRefresh ? [] : this.findsData.data).concat(data.data)
            this.findsData.page = data.current_page
            this.findsData.pageTotal = Math.ceil(data.total / data.per_page) || 1
            this.findsData.page++
            if(this.findsData.pageTotal === 1 && !this.findsData.data.length){
              this.findsData.status = 5
            }

            resolve()
          }).catch(e =>{
            this.findsData.status = 0
            reject()
          })
        }else{
          this.findsData.status = this.findsData.data.length ? 4 : 5
          resolve()
        }
      })
    },

    toggle_zan (id, is_zan, e){
      e.stopPropagation()
      _api('zan/setZanStatus', {
        f_id: id,
        status: !is_zan ? 1 : 0
      }).then(() =>{
        this.$alert.toast(!is_zan ? '点赞成功' : '取消点赞', 'success')
        var targetItem = this.findsData.data.filter(val => val.id === id)[0]
        targetItem.is_zan = !is_zan
        targetItem.zan_count += !is_zan ? 1 : -1
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@sty/allList.less';

.container{
  padding-bottom: 20px;
}
</style>